function setCookie(c_name, value, expiredays) {
	var exdate = new Date();
	exdate.setDate(exdate.getDate() + expiredays);
	document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "": ";expires=" + exdate.toGMTString());
}
function getCookie(c_name) {
	if (document.cookie.length > 0) {
		c_start = document.cookie.indexOf(c_name + "=");
		if (c_start != -1) {
			c_start = c_start + c_name.length + 1;
			c_end = document.cookie.indexOf(";", c_start);
			if (c_end == -1) c_end = document.cookie.length;
			return unescape(document.cookie.substring(c_start, c_end));
		}
	}
	return "";
}
$(document).ready(function() {
	window.images = {
		"canvas": $("#show").get(0),
		"ctx": $("#show").get(0).getContext('2d'),
		"loop": "",
		"load": 0,
		"mo": undefined,
		"lockmo": false,
		//锁定移动
		"phxy": [0, 0],
		//平滑移动坐标
		"pic": [],
		"puzzle": [],
		"xy": [],
		"setting": {
			"x": 5,
			"y": 5,
			"f": 5,
			"count": 500,
			"sleep": 10,
			"image": {
				"url": "",
				"img": ""
			}
		},
		"moveArr": [],
		"move": function(str) {
			switch (Number(str)) {
			case 1:
				if ((this.xy[0] - 1) != -1) {
					this.puzzle[this.xy[0]][this.xy[1]] = this.puzzle[this.xy[0] - 1][this.xy[1]];
					this.puzzle[this.xy[0] -= 1][this.xy[1]] = 0;
				} else {
					return false;
				}
				break;
			case 2:
				if ((this.xy[0] + 1) != this.puzzle.length) {
					this.puzzle[this.xy[0]][this.xy[1]] = this.puzzle[this.xy[0] + 1][this.xy[1]];
					this.puzzle[this.xy[0] += 1][this.xy[1]] = 0;
				} else {
					return false;
				}
				break;
			case 3:
				if ((this.xy[1] - 1) != -1) {
					this.puzzle[this.xy[0]][this.xy[1]] = this.puzzle[this.xy[0]][this.xy[1] - 1];
					this.puzzle[this.xy[0]][this.xy[1] -= 1] = 0;
				} else {
					return false;
				}
				break;
			case 4:
				if ((this.xy[1] + 1) != this.puzzle[0].length) {
					this.puzzle[this.xy[0]][this.xy[1]] = this.puzzle[this.xy[0]][this.xy[1] + 1];
					this.puzzle[this.xy[0]][this.xy[1] += 1] = 0;
				} else {
					return false;
				}
				break;
			}
		},
		"initarr": function() {
			var x = this.setting.x;
			var y = this.setting.y;
			this.xy = [y - 1, x - 1];
			for (var i = 0; i < y; i++) {
				this.puzzle.push([]);
				for (var j = 0; j < x; j++) {
					this.load++;
					if (i == (y - 1) && j == (x - 1)) {
						this.puzzle[i][j] = 0;
					} else {
						this.puzzle[i][j] = this.load;
					}
					$("#load").css("width", ((this.load / (this.setting.x * this.setting.y + this.setting.count)) * 100) + "%");
				}
			}
		},
		"generate": function() {
			var count = this.setting.count;
			var last = 0;
			var rand;
			var randArr = [1, 2, 3, 4];
			var s;
			for (var i = 0; i < count; i++) {
				rand = randArr[Math.floor(Math.random() * randArr.length)];
				s = this.move(rand);
				while (s === false) {
					rand = randArr[Math.floor(Math.random() * randArr.length)];
					s = this.move(rand);
				}
				switch (rand) {
				case 1:
					last = 2;
					randArr = [1, 3, 4];
					break;
				case 2:
					last = 1;
					randArr = [2, 3, 4];
					break;
				case 3:
					last = 4;
					randArr = [1, 2, 3];
					break;
				case 4:
					last = 3;
					randArr = [1, 2, 4];
					break;
				}
				this.moveArr.unshift(last);
				this.load++;
				$("#load").css("width", ((this.load / (this.setting.x * this.setting.y + this.setting.count)) * 100) + "%");
			}
		},
		"init": function() {
			this.loop = setInterval(function() {
				window.images.play();
			},
			this.setting.sleep);
		},
		"loadimage": function() {
			var img = new Image();
			img.src = this.setting.image.url;
			this.setting.image.img = img;
			$("#jdt").show();
			$("#Info").text("图片加载中....[不会显示加载进度]");
			this.setting.image.img.onload = function() {
				if ((this.width % images.setting.x) == 0 && (this.height % images.setting.y) == 0) {
					images.canvas.width = this.width;
					images.canvas.height = this.height;
					images.ready();
				} else {
					this.load = 0;
					this.puzzle = [];
					this.moveArr = [];
					this.mo = 0;
					this.xy = [];
					$(".login-top").children().html("图片大小: x:" + this.width + "&nbsp;&nbsp;&nbsp;y:" + this.height);
					alert("行和列必须为图片长宽的因数");
					$(".login-top").show();
					$("#jdt").hide();
					$("#setting").show();
				}
			}
		},
		"set": function() {
			this.setting.sleep = Number($("#sleep").val());
			this.setting.x = Number($("#x").val());
			this.setting.y = Number($("#y").val());
			this.setting.f = Number($("#frame").val());
			this.setting.count = Number($("#count").val());
			this.setting.image.url = $("#input_pic").val();
			$("#setting").hide();
			this.loadimage();
		},
		"ready": function() {
			$("#Info").text("生成拼图...");
			this.initarr();
			this.generate();
			$("#Info").text("分割图片...");
			if (this.splitpic() === false) {
				return false;
			}
			$(".login-top").hide();
			$("#jdt").hide();
			$(this.canvas).show();
			this.init();
		},
		"splitpic": function() {
			var x, y;
			var canvas_arr = [];
			x = this.setting.image.img.width / this.setting.x;
			y = this.setting.image.img.height / this.setting.y;
			this.setting.image.x = x;
			this.setting.image.y = y;
			if ((x % this.setting.f) != 0 || (y % this.setting.f) != 0) {
				this.load = 0;
				this.puzzle = [];
				this.moveArr = [];
				this.mo = 0;
				this.xy = [];
				$(".login-top").children().html("图片大小: x:" + this.setting.image.img.width + "&nbsp;&nbsp;&nbsp;y:" + this.setting.image.img.height);
				alert("每次移动必须为分割后图片大小的公因数");
				$(".login-top").show();
				$("#jdt").hide();
				$("#setting").show();
				return false;
			}
			$("#load").css("width", "0%");
			var can = document.createElement("canvas");
			for (var i = 0; i < this.setting.y; i++) {
				for (var j = 0; j < this.setting.x; j++) {
					if (i == (this.setting.y - 1) && j == (this.setting.x - 1)) {
						break;
					}
					can.width = x;
					can.height = y;
					var ctx = can.getContext('2d');
					ctx.drawImage(this.setting.image.img, (j * x), (i * y), x, y, 0, 0, x, y);
					try {
						var imagedata = can.toDataURL();
						var imagee = new Image();
						imagee.src = imagedata;
						canvas_arr.push(imagee);
						ctx.clearRect(0, 0, x, y);
					} catch(e) {
						canvas_arr.push(can);
						$("#load").css("width", ((i * this.setting.x + j + 1) / (this.setting.y * this.setting.x - 1) * 100) + "%");
						can = document.createElement("canvas");
					}
				}
			}
			this.pic = canvas_arr;
			this.load = true;
		},
		"play": function() {
			switch (Number(this.mo)) {
			case 1:
				var y = this.xy[0] + 1;
				this.ctx.clearRect(this.xy[1] * this.setting.image.x, this.xy[0] * this.setting.image.y, this.setting.image.x, this.setting.image.y * 2);
				this.lockmo = true;
				this.ctx.drawImage(this.pic[this.puzzle[y][this.xy[1]] - 1], this.xy[1] * this.setting.image.x, this.xy[0] * this.setting.image.y + (this.phxy[1] += this.setting.f));
				if (this.phxy[1] >= this.setting.image.y) {
					this.phxy = [0, 0];
					this.lockmo = false;
				}
				break;
			case 2:
				var y = this.xy[0] - 1;
				this.ctx.clearRect(this.xy[1] * this.setting.image.x, y * this.setting.image.y, this.setting.image.x, this.setting.image.y * 2);
				this.lockmo = true;
				this.ctx.drawImage(this.pic[this.puzzle[y][this.xy[1]] - 1], this.xy[1] * this.setting.image.x, this.xy[0] * this.setting.image.y + (this.phxy[1] -= this.setting.f));
				if (this.phxy[1] <= -this.setting.image.y) {
					this.phxy = [0, 0];
					this.lockmo = false;
				}
				break;
			case 3:
				var x = this.xy[1] + 1;
				this.ctx.clearRect(this.xy[1] * this.setting.image.x, this.xy[0] * this.setting.image.y, this.setting.image.x * 2, this.setting.image.y);
				this.lockmo = true;
				this.ctx.drawImage(this.pic[this.puzzle[this.xy[0]][x] - 1], this.xy[1] * this.setting.image.x + (this.phxy[0] += this.setting.f), this.xy[0] * this.setting.image.y);
				if (this.phxy[0] >= this.setting.image.x) {
					this.phxy = [0, 0];
					this.lockmo = false;
				}
				break;
			case 4:
				var x = this.xy[1] - 1;
				this.ctx.clearRect(x * this.setting.image.x, this.xy[0] * this.setting.image.y, this.setting.image.x * 2, this.setting.image.y);
				this.lockmo = true;
				this.ctx.drawImage(this.pic[this.puzzle[this.xy[0]][x] - 1], this.xy[1] * this.setting.image.x + (this.phxy[0] -= this.setting.f), this.xy[0] * this.setting.image.y);
				if (this.phxy[0] <= -this.setting.image.x) {
					this.phxy = [0, 0];
					this.lockmo = false;
				}
				break;
			default:
				this.ctx.clearRect(0, 0, this.setting.image.img.width, this.setting.image.img.height);
				var x = 0;
				var y = 0;
				var ax = 0;
				var ay = 0;
				for (var i = 0; i < this.pic.length + 1; i++) {
					if (this.puzzle[ay][ax] != 0) {
						this.ctx.drawImage(this.pic[this.puzzle[ay][ax] - 1], x, y);
					}
					x += this.setting.image.x;
					ax += 1;
					if (x == this.setting.image.img.width) {
						y += this.setting.image.y;
						x = 0;
						ax = 0;
						ay += 1;
					}
				}
				break;
			}
			if (!this.lockmo) {
				this.mo = this.moveArr.splice(0, 1).toString();
				if (this.mo !== "") {
					this.move(this.mo);
				} else {
					clearInterval(this.loop);
				}
			}
		}
	};
	$("form").submit(function() {
		images.set();
	});
});